<template>
<div>
  <div style="padding:10px">
    <div class="opt-area-02">
      <div class="input-frame" style="width: 100%;text-alone:left;margin-bottom:10px;font-size: 14px">
        &nbsp;&nbsp;&nbsp;&nbsp;人数：<span>{{params.totalRecord}}</span>
      </div>
      <div>
      </div>
      <div class="left-con">
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入姓名" style="width: 164px" v-model="params.user_name"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text"  placeholder="请输入身份证号" style="width: 164px" v-model="params.cardno"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="常住类型" v-model="params.user_type" style="width:164px">
            <Option value="">全部</Option>
            <Option value="0">常住人口</Option>
            <Option value="1">流动人口</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择区" :disabled="Adisabled" v-model="params.area_id" style="width:164px" clearable @on-change="findDistrictList(3,params.area_id)" @on-clear="clearMsg(3)">
            <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择街道" :disabled="Bdisabled" v-model="params.street_id" style="width:164px" clearable @on-change="findDistrictList(4,params.street_id)" @on-clear="clearMsg(4)">
            <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
          <Select placeholder="请选择社区" v-model="params.community_id" style="width:164px" clearable>
            <Option v-for="item in List3" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
      </div>
<!--      <div class="left-con" style="margin-top: 10px" v-if="severUserInfo.company_grade === '5'">-->
<!--        <div class="input-frame" style="width: 164px">-->
<!--          <Select placeholder="请选择网格" v-model="params.garden_id" style="width:164px" clearable @on-change="findGridBuildingList(params.garden_id)" @on-clear="clearGrid(6)">-->
<!--            <Option v-for="item in GridGardenList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </div>-->
<!--        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">-->
<!--          <Select placeholder="请选择楼" v-model="params.building_id" style="width:164px" clearable @on-change="findGridUnitList(params.building_id)" @on-clear="clearGrid(7)">-->
<!--            <Option v-for="item in GridBuildingList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </div>-->
<!--        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">-->
<!--          <Select placeholder="请选择单元" v-model="params.unit_id" style="width:164px" clearable @on-change="findGridFloorList(params.unit_id)" @on-clear="clearGrid(8)">-->
<!--            <Option v-for="item in GridUnitList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </div>-->
<!--        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">-->
<!--          <Select placeholder="请选择层" v-model="params.floor_id" style="width:164px" clearable @on-change="findGridDoorplateList(params.floor_id)" @on-clear="clearGrid(9)">-->
<!--            <Option v-for="item in GridFloorList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </div>-->
<!--        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">-->
<!--          <Select placeholder="请选择户" v-model="params.doorplate_id" style="width:164px" clearable @on-clear="clearGrid(10)">-->
<!--            <Option v-for="item in GridDoorplateList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </div>-->
<!--      </div>-->
      <div class="left-con" style="margin-top: 10px">
        <div class="input-frame" style="width: 164px">
          <Select placeholder="是否核酸检测" v-model="params.nucleicAcid" style="width:164px">
<!--            <Option value="">全部</Option>-->
            <Option value="yes">是</Option>
            <Option value="no">否</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 338px">
          <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" v-model="hsjcsj" placeholder="请选择核酸检测日期" style="width: 338px"></DatePicker>
        </div>
        <Button type="info" size="small" style="margin-top: 5px;margin-right:5px" @click="searchList">搜索</Button>
        <Button :loading="exportButton" type="info" size="small" style="margin-top: 5px;margin-right:5px" @click="exportData">导出数据</Button>
<!--        <div class="input-frame" style="width: 164px">-->
<!--          <Select placeholder="核酸检测时间排序" v-model="params.time_order_by" style="width:164px">-->
<!--            <Option value="">全部</Option>-->
<!--            <Option value="0">正序</Option>-->
<!--            <Option value="1">倒序</Option>-->
<!--          </Select>-->
<!--        </div>-->
      </div>
    </div>
    <Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
      user_type
      <template slot-scope="{ row, index }" slot="user_type">
        <span v-show="row.user_type === '0'">常住人口</span>
        <span v-show="row.user_type === '1'">流动人口</span>
      </template>
      <template slot-scope="{ row, index }" slot="cardno">
        {{row.cardno? row.cardno.replace(/^(.{6})(?:\w+)(.{4})$/,
        "\$1******\$2"):""}}
      </template>
<!--      <template slot-scope="{ row, index }" slot="action">-->
<!--        <Button type="info" size="small" style="margin-right: 5px;float: left" @click="nucleicAcidDetail(row)">核酸详情</Button>-->
<!--&lt;!&ndash;        <Button type="success" size="small" style="float: left" @click="addChuzhi(row)">处置</Button>&ndash;&gt;-->
<!--      </template>-->
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
  </div>
<!--  <Modal-->
<!--    width="1000"-->
<!--    v-model="nucleicAcidDetailModal"-->
<!--    title="核酸检测详情">-->
<!--    <Table border :columns="detailTableColumns" :data="detailTableData" :loading="detailTableLoading">-->
<!--      <template slot-scope="{ row, index }" slot="idenno">-->
<!--        {{row.idenno? row.idenno.replace(/^(.{6})(?:\w+)(.{4})$/,-->
<!--        "\$1******\$2"):""}}-->
<!--      </template>-->
<!--    </Table>-->
<!--  </Modal>-->
<!--  <Modal-->
<!--    width="400"-->
<!--    v-model="chuzhi.isshow"-->
<!--    title="添加处置信息">-->
<!--    <Form :model="chuzhi.info" label-position="top">-->
<!--    <FormItem>-->
<!--      <template slot="label">-->
<!--        <span class="red-star">*</span>处置类型：-->
<!--      </template>-->
<!--    <Select placeholder="处置类型" v-model="chuzhi.info.handle_type">-->
<!--      <Option value="2">离沈</Option>-->
<!--      <Option value="3">使用他人信息</Option>-->
<!--      <Option value="4">第三方检测机构</Option>-->
<!--      <Option value="6">失联</Option>-->
<!--      <Option value="5">其他</Option>-->
<!--    </Select>-->
<!--    </FormItem>-->
<!--    <FormItem v-if="chuzhi.info.handle_type === '2'">-->
<!--        <template slot="label">-->
<!--        离沈目的地：-->
<!--      </template>-->
<!--      <Input type="text"  placeholder="离沈目的地" v-model="chuzhi.info.other_name"/>-->
<!--    </FormItem>-->
<!--    &lt;!&ndash; <FormItem v-if="chuzhi.info.handle_type === '3'">-->
<!--      <template slot="label">-->
<!--        <span class="red-star">*</span>他人姓名：-->
<!--      </template>-->
<!--      <Input type="text"  placeholder="他人姓名" v-model="chuzhi.info.other_name"/>-->
<!--    </FormItem>-->
<!--    <FormItem v-if="chuzhi.info.handle_type === '3'">-->
<!--      <template slot="label">-->
<!--        <span class="red-star">*</span>他人身份证号：-->
<!--      </template>-->
<!--      <Input type="text"  placeholder="他人身份证号" v-model="chuzhi.info.other_cardno"/>-->
<!--    </FormItem> &ndash;&gt;-->
<!--    &lt;!&ndash; <FormItem v-if="chuzhi.info.handle_type === '4'">-->
<!--      <template slot="label">-->
<!--        <span class="red-star">*</span>第三方检测机构：-->
<!--      </template>-->
<!--      <Input type="text"  placeholder="第三方检测机构" v-model="chuzhi.info.other_name"/>-->
<!--    </FormItem> &ndash;&gt;-->
<!--    <FormItem v-if="chuzhi.info.handle_type === '5'">-->
<!--        <template slot="label">-->
<!--          <span class="red-star">*</span>是否应检：-->
<!--        </template>-->
<!--      <RadioGroup v-model="chuzhi.info.is_need" type="button">-->
<!--        <Radio label="应检" value="1"></Radio>-->
<!--        <Radio label="不应检" value="0"></Radio>-->
<!--    </RadioGroup>-->
<!--    </FormItem>-->
<!--    <FormItem v-if="chuzhi.info.handle_type && chuzhi.info.handle_type !== '2' && chuzhi.info.handle_type !== '6' && chuzhi.info.is_need !== '不应检'">-->
<!--        <template slot="label">-->
<!--          <span class="red-star">*</span>核酸检测时间：-->
<!--        </template>-->
<!--        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="chuzhi.info.hs_create_time1"></DatePicker>-->
<!--    </FormItem>-->
<!--    <FormItem v-if="chuzhi.info.handle_type === '5' && chuzhi.info.is_need === '不应检'">-->
<!--      <template slot="label">-->
<!--        备注：-->
<!--      </template><Input maxlength="100" show-word-limit type="textarea"  placeholder="请注明情况" v-model="chuzhi.info.other_name"/>-->
<!--    </FormItem>-->
<!--    </Form>-->
<!--    <div slot="footer">-->
<!--        <Button type="success" @click="addchuzhiinfo">保存</Button>-->
<!--        <Button type="error" @click="chuzhi.isshow=false">关闭</Button>-->
<!--      </div>-->
<!--  </Modal>-->
</div>
</template>

<script>
import {
  findBuildingXJList,
  findFloorXJList,
  findGardenXJList,
  findSubordinateList,
  findUnitXJList,
  findHsDetailList,
  // HsCommunityList,
  ShenheHsList,
  // findUserNewStreetList,
  saveNucleicAcidLabelSwitchForSource,
  datetime2str
} from '../../../api/eventlist'
import { date0str1, getDate, getDateNext } from '../../../api/customer-service'

export default {
  name: 'index',
  data () {
    return {
      severUserInfo: {},
      tableColumns: [
        {
          title: '姓名',
          key: 'user_name',
          align: 'center'
        },
        {
          title: '身份证号',
          slot: 'cardno',
          // width: 180,
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'mobile',
          align: 'center'
          // width: 120
        },
        {
          title: '街道',
          key: 'street_name',
          align: 'center'
        },
        {
          title: '社区',
          key: 'community_name',
          align: 'center'
        }
        // {
        //   title: '常住类型',
        //   slot: 'user_type',
        //   align: 'center',
        //   width: 120
        // },
        // {
        //   title: '最后一次核酸检验时间',
        //   key: 'hs_create_time',
        //   width: 150,
        //   align: 'center'
        // },
        // {
        //   title: '网格',
        //   key: 'garden_name',
        //   align: 'center'
        // },
        // {
        //   title: '楼',
        //   key: 'building_name',
        //   align: 'center'
        // },
        // {
        //   title: '单元',
        //   key: 'unit_name',
        //   align: 'center'
        // },
        // {
        //   title: '层',
        //   key: 'floor_name',
        //   align: 'center'
        // },
        // {
        //   title: '户',
        //   key: 'doorplate_name',
        //   align: 'center'
        // },
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 200,
        //   align: 'center'
        // }
      ],
      chuzhi: {
        isshow: false,
        info: {
          is_need: '应检'
        }
      },
      tableData: [],
      tableLoading: false,
      Adisabled: false,
      Bdisabled: false,
      hsjcsj: [
        getDate(new Date()),
        getDateNext(new Date())
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        user_name: '',
        cardno: '',
        mobile: '',
        area_id: '',
        street_id: '',
        community_id: '',
        garden_id: '',
        building_id: '',
        unit_id: '',
        floor_id: '',
        doorplate_id: '',
        nucleicAcid: 'no',
        time_order_by: ''
      },
      nucleicAcidDetailModal: false,
      detailTableColumns: [
        {
          title: '姓名',
          key: 'patient_name',
          align: 'center'
        },
        {
          title: '身份证号',
          slot: 'idenno',
          align: 'center'
        },
        // {
        //   title: '处置类型',
        //   key: 'handle_type_name',
        //   align: 'center'
        // },
        {
          title: '核酸检测时间',
          key: 'cy_time',
          align: 'center'
        }
        // {
        //   title: '补充信息',
        //   key: 'other_name',
        //   align: 'center'
        // }
      ],
      detailTableData: [],
      detailTableLoading: false,
      GridGardenList: [],
      GridBuildingList: [],
      GridUnitList: [],
      GridFloorList: [],
      GridDoorplateList: [],
      List1: [],
      List2: [],
      List3: [],
      exportButton: false
    }
  },
  methods: {
    exportData () {
      let company_code = this.severUserInfo.company_code
      if (company_code === 'LM00002') {
        let data = this.params
        if (this.params.nucleicAcid !== '' && (this.hsjcsj[0] === '' || this.hsjcsj[0] === undefined || this.hsjcsj[1] === '' || this.hsjcsj[1] === undefined)) {
          this.$Notice.error({ title: '查询失败！', desc: '请选择核酸日期进行查询！' })
          return
        }
        let time = this.hsjcsj
        let time1 = date0str1(time[0])
        let time2 = date0str1(time[1])
        data.hsjcsj_begin = time1
        data.hsjcsj_end = time2
        if (data.hsjcsj_begin.substring(0, 7) !== data.hsjcsj_end.substring(0, 7)) {
          this.$Notice.error({ title: '查询失败！', desc: '核酸日期无法跨月查询！' })
          return
        }
        this.exportButton = true
        this.$Message.loading({
          content: '数据查询处理中，请耐心等待不要关闭页面！',
          duration: 60
        })
        let expireTime = 60 * 1000 // 过期时间为60s
        localStorage.setItem('exportButton', '0')
        localStorage.setItem('exportButton-expire', (new Date().valueOf() + expireTime).toString())
        let x = this.objToParam(data)
        window.location.href = encodeURI(`${location.origin}` + '/api/ac/grid/hsService/shenheDownHsExcel' + x)
      } else {
        this.$Notice.error({ title: '查询列表信息失败', desc: '无使用权限！' })
      }
    },
    objToParam (param) {
      if (Object.prototype.toString.call(param) !== '[object Object]') {
        return ''
      }
      let queryParam = ''
      for (let key in param) {
        if (param.hasOwnProperty(key)) {
          let value = param[key]
          if (queryParam.length === 0) {
            if (!(this.toQueryPair(key, value).length === 0)) {
              queryParam += '?' + this.toQueryPair(key, value)
            }
          } else {
            if (!(this.toQueryPair(key, value).length === 0)) {
              queryParam += '&' + this.toQueryPair(key, value)
            }
          }
        }
      }
      return queryParam
    },
    toQueryPair (key, value) {
      console.log(key, typeof value)
      if (typeof value === 'undefined') {
        // return `&${key}=`
        return ''
      }
      if (value === '' || value === undefined || value === null) {
        return ''
      }
      if (key === 'pageNo' || key === 'pageSize' || key === 'totalRecord') {
        return ''
      }
      return `${key}=${value}`
    },
    // 初始化
    init () {
      this.findTableList()
    },
    // 列表
    findTableList () {
      let company_code = this.severUserInfo.company_code
      if (company_code === 'LM00002') {
        let data = this.params
        if (this.params.nucleicAcid !== '' && (this.hsjcsj[0] === '' || this.hsjcsj[0] === undefined || this.hsjcsj[1] === '' || this.hsjcsj[1] === undefined)) {
          this.$Notice.error({ title: '查询失败！', desc: '请选择核酸日期进行查询！' })
          return
        }
        let time = this.hsjcsj
        let time1 = date0str1(time[0])
        let time2 = date0str1(time[1])
        data.hsjcsj_begin = time1
        data.hsjcsj_end = time2
        if (data.hsjcsj_begin.substring(0, 7) !== data.hsjcsj_end.substring(0, 7)) {
          this.$Notice.error({ title: '查询失败！', desc: '核酸日期无法跨月查询！' })
          return
        }
        this.tableLoading = true
        ShenheHsList(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.tableData = ret.data.data.results
            this.params.totalRecord = ret.data.data.totalRecord
            this.tableLoading = false
          } else {
            this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
          }
        })
      } else {
        this.$Notice.error({ title: '查询列表信息失败', desc: '无使用权限！' })
      }
    },
    // 翻页
    pageAction (page) {
      this.params.pageNo = page
      this.findTableList()
    },
    // 改变条数
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTableList(this.params.pageNo)
    },
    // 核酸详情
    nucleicAcidDetail (e) {
      this.nucleicAcidDetailModal = true
      this.detailTableLoading = true
      let data = {
        cardno: e.cardno
      }
      findHsDetailList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailTableData = ret.data.data
          this.detailTableLoading = false
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    // 处置
    addChuzhi (row) {
      this.chuzhi = {
        isshow: true,
        info: {
          user_name: row.user_name,
          cardno: row.cardno
        }
      }
    },
    addchuzhiinfo () {
      console.log(this.chuzhi)
      if (!this.chuzhi.info.handle_type) {
        this.$Notice.error({ title: '请选择处置类型' })
        return
      }
      if (this.chuzhi.info.handle_type === '5' && !this.chuzhi.info.is_need) {
        this.$Notice.error({ title: '请选择是否应检' })
        return
      }
      if (!this.chuzhi.info.hs_create_time1 && this.chuzhi.info.handle_type && this.chuzhi.info.handle_type !== '2' && this.chuzhi.info.handle_type !== '6' && this.chuzhi.info.is_need !== '不应检') {
        this.$Notice.error({ title: '请选择核酸检测时间' })
        return
      }
      if (this.chuzhi.info.hs_create_time1) {
        this.chuzhi.info.hs_create_time = datetime2str(this.chuzhi.info.hs_create_time1)
      }
      saveNucleicAcidLabelSwitchForSource(this.chuzhi.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.chuzhi = {
            isshow: false,
            info: {}
          }
          this.$Notice.success({ title: '保存成功' })
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    },
    // 搜索
    searchList () {
      this.params.pageNo = 1
      this.findTableList()
    },
    // 清除
    clearGrid (e) {
      if (e === 6) {
        this.params.garden_id = ''
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 7) {
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 8) {
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 9) {
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 10) {
        this.params.doorplate_id = ''
      }
    },
    // 查询网格下拉
    findSelectGardenList (e) {
      let data = {
        grade: 5,
        id: e
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridGardenList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询楼下拉
    findGridBuildingList (e) {
      let data = {
        id: e
      }
      findGardenXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridBuildingList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      }
      )
    },
    // 查询单元下拉
    findGridUnitList (e) {
      let data = {
        id: e
      }
      findBuildingXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridUnitList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询层下拉
    findGridFloorList (e) {
      let data = {
        id: e
      }
      findUnitXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridFloorList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询户下拉
    findGridDoorplateList (e) {
      let data = {
        floor_id: e
      }
      findFloorXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridDoorplateList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询区街道社区下拉
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    clearMsg (e1) {
      if (e1 === 3) {
        this.params.area_id = ''
        this.params.street_id = ''
        this.params.community_id = ''
      } else if (e1 === 4) {
        this.params.street_id = ''
        this.params.community_id = ''
      }
    }
  },
  mounted () {
    // localStorage.getItem("")
    // localStorage.removeItem('exportButton')
    // localStorage.removeItem('exportButton-expire')
    if (localStorage.getItem('exportButton') === '0') {
      this.exportButton = true
      let x = parseInt(localStorage.getItem('exportButton-expire'))
      // 当前时间 已经超过 设置的过期时间
      if (x < (new Date().valueOf())) {
        localStorage.removeItem('exportButton')
        localStorage.removeItem('exportButton-expire')
      } else {
        let value = parseInt(localStorage.getItem('exportButton-expire'))
        let x = value - new Date().valueOf()
        let _this = this
        setTimeout(function () {
          // that.openCamera()
          _this.exportButton = false
          localStorage.removeItem('exportButton')
          localStorage.removeItem('exportButton-expire')
        }, x)
      }
    }
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  },
  watch: {
    'severUserInfo.company_grade' (val) {
      if (val === '2') {
        this.findDistrictList(2, '999999999')
      } else if (val === '3') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.company_id
        this.findDistrictList(3, this.params.area_id)
        this.Adisabled = true
      } else if (val === '4') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_id
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.company_id
        this.findDistrictList(4, this.params.street_id)
        this.Adisabled = true
        this.Bdisabled = true
      } else if (val === '5') {
        this.findSelectGardenList(this.severUserInfo.company_id)
      }
    }
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.red-star {
    font-family: SimSun;
    color: #f00;
    margin-right: 4px;
  }
</style>
